"use client";
import "bytemd/dist/index.css";
import "highlight.js/styles/vs.css";
import "./index.css";
import {Button, Card, List, Menu} from "antd";
import Link from "next/link";
import TagList from "@/components/TagList";
import React, {useState} from "react";
import Sider from "antd/es/layout/Sider";
import {MenuFoldOutlined, MenuUnfoldOutlined} from "@ant-design/icons";
import Title from "antd/es/typography/Title";


/**
 * 伸缩组件
 * @param props
 * @constructor
 */

interface QuestionSidebarProps {
    bank: { title: string };
    questionMenuItemList: { key: string; label: React.ReactNode }[];
    questionId: string;
}



const QuestionSidebar = ({ bank, questionMenuItemList, questionId }) => {
    const [collapsed, setCollapsed] = useState(false);

    const toggleCollapsed = () => {
        setCollapsed(!collapsed);
    };

    return (
        <Sider
            width={collapsed ? 80 : 240}
            theme="light"
            style={{ padding: '24px 0' }}
        >
            <Button
                type="primary"
                onClick={toggleCollapsed}
                style={{ marginBottom: 16 }}
            >
                {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </Button>
            <Title level={4} style={{ padding: '0 20px', display: collapsed ? 'none' : 'block' }}>
                {bank.title}
            </Title>
            <Menu items={questionMenuItemList} selectedKeys={[questionId]} />
        </Sider>
    );
};

export default QuestionSidebar;
